<!--
 * @Author: dazy dazy916@126.com
 * @Date: 2025-09-18 11:22:23
 * @LastEditors: dazy dazy916@126.com
 * @LastEditTime: 2025-09-22 13:56:16
 * @FilePath: \H5\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { reactive, ref, onMounted, getCurrentInstance, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useChatStore } from '@/store'
import Header from '@/components/topNav.vue'
const { proxy: { $http } } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const store = useChatStore()
const loginType = ref(null)
// watch([() => store.loginType, () => route.name], ([val, name]) => {
//   loginType.value = val
//   if (val === 'teachIndex') {
//     loginType.value =null
//   } else if (val === 'studentIndex') {
//     loginType.value = null
//   }else{
//     if (route.name !== 'teachIndex' && route.name !== 'studentIndex') {
//       loginType.value = true
//     } else {
//       loginType.value = null
//     }
//   }
// }, { immediate: true })
watch(() => route.name, (val) => {
  console.log(val, 'val..........')
  // loginType.value = val
    if (val === 'teachIndex') {
      loginType.value =null
    } else if (val === 'studentIndex') {
      loginType.value = null
    }else{
      if (route.name !== 'teachIndex' && route.name !== 'studentIndex') {
        loginType.value = true
      } else {
        loginType.value = null
      }
    }

}, { immediate: true })
onMounted(() => {
  // if (route&&route.name !== 'teachIndex' && route.name !== 'studentIndex') {
  //   loginType.value = true
  // } else {
  //   loginType.value = null
  // }
})
</script>

<template>
  <div class="mask">
    <Header :identity="loginType" v-if="loginType" />
    <router-view />
  </div>
</template>

<style lang="scss">
html {
  touch-action: pan-y;
  /* 允许垂直滚动，禁止水平滑动 */
}
* {
  touch-action: manipulation;
}
/* 全局文本选择样式 */
::selection {
  background: rgba(233, 82, 148, 0.2);
}

/* 滚动条优化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #E9529433;
  border-radius: 3px;
}
.mask{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.2);
}
.logo {
  // height: 6em;
  // padding: 1.5em;
  // will-change: filter;
  // transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.main-content {
  flex: 1;
  padding: 24px;
  display: flex;
  justify-content: center;
  padding-bottom: 10px;

  .book-card {
    width: 75vw;
    height: 80vh;
    border-radius: 2px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    /* 新增：为按钮提供定位上下文 */

    .centered-image {
      width: 100%;
      height: 100%;
      object-fit: cover; // 保持图片比例并填充容器
    }

    // 开始教学按钮样式
    .start-teaching-btn {
      position: absolute;
      left: 50%;
      bottom: 20%; // 距离底部20%
      transform: translateX(-50%); // 水平居中
      padding: 12px 24px;
      font-size: 18px;
      font-weight: 600;
      color: white;
      background-color: #42b983;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(66, 185, 131, 0.3);
      transition: all 0.3s ease;

      &:hover {
        background-color: #359e6d;
        transform: translateX(-50%) translateY(-2px);
        box-shadow: 0 6px 16px rgba(66, 185, 131, 0.4);
      }

      &:active {
        transform: translateX(-50%) translateY(0);
        box-shadow: 0 2px 8px rgba(66, 185, 131, 0.3);
      }
    }
  }
}
</style>
